<template>
  <div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="first">
        <order-view ref="orderView"></order-view>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="second">
        <order-view ref="orderView2"></order-view>
      </el-tab-pane>
      <el-tab-pane label="待发货" name="third">
        <order-view ref="orderView3"></order-view>
      </el-tab-pane>
      <el-tab-pane label="待收货" name="fourth">
        <order-view ref="orderView4"></order-view>
      </el-tab-pane>
      <el-tab-pane label="待评价" name="five">
        <order-view ref="orderView5"></order-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import OrderView from "./OrderView";

  export default {
    name: "OrderTabPane",
    data() {
      return {
        activeName: ''
      }
    },
    methods: {
      handleClick() {
        switch (this.activeName) {
          case "first":
            this.$nextTick(item => {
              this.$refs.orderView.order.orderState = "";
              this.$refs.orderView.getOrders();
            });
            break;
          case "second":
            this.$nextTick(item => {
              this.$refs.orderView2.order.orderState = "o-1";
              this.$refs.orderView2.getOrders();
            });
            break;
          case "third":
            this.$nextTick(item => {
              this.$refs.orderView3.order.orderState = "o-6";
              this.$refs.orderView3.getOrders();
            })
            break;
          case "fourth":
            this.$nextTick(item => {
              this.$refs.orderView4.order.orderState = "o-3";
              this.$refs.orderView4.getOrders();
            })
            break;
          case "five":
            this.$nextTick(item => {
              this.$refs.orderView5.order.orderState = "o-5";
              this.$refs.orderView5.getOrders();
            })
            break;
        }
      },
    },
    components: {
      OrderView
    }
  }
</script>

<style scoped>

</style>
